/**
 * Object.defineProperty
 * 劫持对象的属性
 * 
 */

function Observe(data) {
    //  if( data instanceof Array){
    //     for(let key in data){
    //         console.log(key,data[key])
    //         Object.defineProperty(data, key, {
    //             value: data[key],
    //             enumerable: true,
    //             writable: true,
    //             configurable: true
    //           })
    //     }

    //  }
    if (!data || typeof data !== "object") {
        return
    }
    Object.keys(data).forEach(key => {
        let val = data[key]
        defineReactive(data, key, val)
    })
}

function defineReactive(data, key, val) {
    Observe(val)
    Object.defineProperty(data, key, {
        configurable: true,
        enumerable: true,
        get() {
            return val
        },
        set(newVal) {
            //判断新值与旧值是否相等
            //判断的后半段是为了验证新值与旧值都为NaN的情况  NaN不等于自身
            if (newVal === val || (newVal !== newVal && val !== val)) {
                return;
            }
            val = newVal
            console.log("触发了setter:", val)
        }
    })
}
var arrayProto = Array.prototype
var arrayMethods = Object.create(arrayProto)
;
[
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
].forEach(function (item) {
    Object.defineProperty(arrayMethods, item, {
        value: function mutator() {
            //缓存原生方法，之后调用
            console.log('array被访问');
            var original = arrayProto[item]
            var args = Array.from(arguments)
            original.apply(this, args)
            // console.log(this);
        },
    })
})

// let data={
//     text:{obj:1},
//     label:"ll"
//  }

// Observe(data)
//  console.log(data)
//  data.text.obj = "你好@"
//  console.log(data)

//  console.log(data.label)
//  data.label = "label"
//  console.log(data.label)

let arr = [1, 2, 3, 5]
Observe(arr)
arr.push(6)
console.log(arr)